<template>
<div class="order-wrap">
    <van-nav-bar :title="'商家订单'" left-text="返回" @click-left="navBack" left-arrow />
    <van-tabs v-model="active" @change="getOrderList">
        <van-tab title="全部">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <order :data="listData.data" @editstatus="editStatus" @getOrderDetails="getOrderDetails" @generation="generation" />
            </van-list>

        </van-tab>
        <van-tab title="待发货">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <order :data="listData.data" @editstatus="editStatus" @getOrderDetails="getOrderDetails" @generation="generation" />
            </van-list>
        </van-tab>

        <van-tab title=" 配送中 ">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <order :data="listData.data" @editstatus="editStatus" @getOrderDetails="getOrderDetails" @generation="generation" />
            </van-list>

        </van-tab>
        <van-tab title=" 未付款">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <order :data="listData.data" @editstatus="editStatus" @getOrderDetails="getOrderDetails" @generation="generation" />
            </van-list>
        </van-tab>
        <van-tab title=" 已完成">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <order :data="listData.data" @editstatus="editStatus" @getOrderDetails="getOrderDetails" @generation="generation" />
            </van-list>
        </van-tab>
        <van-tab title=" 退款">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <order :data="listData.data" @editstatus="editStatus" @getOrderDetails="getOrderDetails" @generation="generation" />
            </van-list>
        </van-tab>
        <van-tab title="取消订单">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <order :data="listData.data" @editstatus="editStatus" @getOrderDetails="getOrderDetails" @generation="generation" />
            </van-list>
        </van-tab>
    </van-tabs>
    <van-popup v-model="send.show" :closeable="true" position="bottom" :close-on-click-overlay="false" :style="{ height: '100%' }">
        <div style="text-align: right;padding: 5px 10px;">
            <van-icon @click="send.show = false" size="26" name="clear" />
        </div>
        <van-cell-group title="快递类型">
            <van-radio-group v-model="send.radio">
                <van-cell-group>
                    <van-cell :title="item" clickable @click="send.radio = index;send.str = item" v-for="(item,index) in delivery" :key="index">
                        <van-radio slot="right-icon" :name="index" />
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </van-cell-group>
        <van-cell-group title="快递单号">
            <van-field v-model="send.num" required clearable label="快递单号" type="string" placeholder="请输入快递单号" />
        </van-cell-group>
        <van-row>
            <van-col span="8"> </van-col>
            <van-col span="11"> </van-col>
            <van-col span="3">
                <van-button type="info" size="small" @click="submitOrder">提交</van-button>
            </van-col>
        </van-row>
    </van-popup>

</div>
</template>

<script>
import order from '@/components/storeMineOrder'
import {
    Dialog
} from 'vant';
import {
    Notify
} from 'vant';
export default {
    name: 'Order',
    data() {
        return {
            active: 0,
            listData: {
                data: []
            },
            loading: true,
            finished: false,
            page: null,
            c_page: null,
            l_page: null,
            topNavLastPage: null,
            IndexSortload: true,
            IndexTopNavloading: false,
            IndexTopNavfinished: false,
            send: {
                show: false,
                radio: 0,
                num: null,
                str: '邮政EMS'
            },
            delivery: [
                '邮政EMS',
                '顺丰快递',
                '韵达快递',
                '圆通快递',
                '申通快递',
                '中通快递',
                '百事快递'
            ],
            sendShow: false,
            value: 123,
            order_num: null
        }
    },
    created() {
        this.onLoad()
    },
    components: {
        order
    },
    methods: {
        getOrderList() {
            this.loading = true,
                this.finished = false,
                this.page = null,
                this.c_page = 1,
                this.l_page = 1,
                this.listData = {
                    data: []
                };
            this.onLoad();
        },
        onLoad() {
            let _this = this;
            let type = null;
            switch (this.active) {
                case 1:
                    type = 'Paid';
                    break;

                case 2:
                    type = 'Dispatch';
                    break;

                case 3:
                    // type = '';
                    type = 'Wait';
                    break;

                case 4:
                    type = 'Finish';
                    break;

                case 5:
                    type = 'Refund';
                    break;

                case 6:
                    type = 'Unpaid';
                    break;

                default:
                    type = '';
                    break;
            };
            let url = '/api/store/manager/order/list/' + type;
            let params = {};
            params.token = sessionStorage.getItem("token");
            params.type = type;
            params.page = this.c_page || null;
            if (this.page = null || this.c_page <= this.l_page) {
                _this.axios.get(url, {
                        params
                    })
                    .then(res => {
                        this.page = 1;
                        if (res.data.data.last_page >= res.data.data.current_page) {

                            this.c_page = res.data.data.current_page + 1;
                            this.l_page = res.data.data.last_page;
                            res.data.data.data.forEach(item => {
                                item.params = JSON.parse(item.params)
                                if (item.dispatch_info) {
                                    item.dispatch_info = JSON.parse(item.dispatch_info);
                                } else {
                                    item.dispatch_info = {
                                        str: 'xd0_123',
                                        num: 'xd0_123',
                                    }
                                }
                            });
                            if (res.data.data.current_page == 1) {
                                this.listData = res.data.data

                            } else {
                                let data = [];

                                data = [...this.listData.data, ...res.data.data.data]
                                this.listData.data = data;
                            }
                            this.loading = false;

                        } else {
                            this.finished = true;
                            this.loading = false;
                        }

                    }).catch(error => {
                        console.log(error)
                    })
            } else {
                this.finished = true;
                this.loading = false;
            }
        },
        generation(item) {
            Dialog.confirm({
                title: '提示',
                message: '确定使用代发功能吗'
            }).then(() => {
                let url = '/api/store/manager/order/issuing/' + item.id;
                let params = {};
                params.token = sessionStorage.getItem("token");
                this.axios.get(url, params).then(r => {
                    Notify({
                        type: 'success',
                        message: r.data.message,
                        background: '#07c160',
                        onClose: () => {
                            this.page = null;
                            this.loading = true;
                            this.finished = false;
                            this.c_page = 1;
                            this.onLoad()
                        }
                    });

                }).catch(err => {
                    Notify({
                        type: 'success',
                        message: r.data.message
                    });
                    console.log(err.response.data.message);

                })
                // on confirm
            }).catch(() => {
                // on cancel
            });
        },
        editStatus(e) {
            this.order_num = e.id;
            let type;
            switch (e.status) {
                case 1:
                    type = 'Wait';

                    break;

                case 2:
                    type = 'UnPaid';
                    break;

                case 'Paid':
                    type = 'Paid';
                    this.send.show = true;
                    break;

                case 4:
                    type = 'Dispatch';
                    break;

                case 5:
                    type = 'Finish';
                    break;

                case 6:
                    type = 'Refund';
                    break;

                default:
                    type = '';
                    break;
            }
        },
        getOrderDetails(item) {
            this.$router.push({
                name: 'storeMineorderDetails'
            })
        },
        navBack() {
            this.$router.go(-1)
        },
        submitOrder() {
            let url = '/api/store/manager/order/status/' + this.order_num;
            if (this.send.num == null) {
                Dialog({
                    message: '请填写快递单号'
                });
            } else {
                let params = {};
                params.token = sessionStorage.getItem("token");
                params.status = 'Dispatch';
                params.dispatch_info = JSON.stringify(this.send);
                this.axios.get(url, {
                    params
                }).then(res => {
                    Notify({
                        type: 'success',
                        background: '#07c160',
                        message: res.data.message
                    });
                    this.send.show = false;
                    this.getOrderList()
                }).catch(err => {
                    console.log(err)
                })
            }

        }
    }
}
</script>

<style lang="less" scoped>

</style>
